<template>
  <b-col class="bg-white border rounded">
    <b-row>
      <b-col class="mx-3 px-0 text-left border-bottom" :class="{clickWeekBtn:display == 0}">
        <span style="font-size:18px;font-family:HYZhengYuan-85S">今日更新</span><b-link @click="showAll" v-b-tooltip.hover.top title="查看本周更新" style="font-size:14px"
          class="ml-3 text-dark">更多>></b-link>
      </b-col>
      <b-col v-if="state.show" class="mr-3 text-right border-bottom col-auto">
        <b-spinner variant="primary" type="grow" small />
      </b-col>
    </b-row>
    <b-row class="daily mt-1 mb-2">
      <b-row v-if="!state.show && bangumiWeek.today.episodes == null">
        <b-col class="text-center ml-3">
          <span style="font-size:14px"> {{state.text}}</span>
        </b-col>
      </b-row>
      <b-row v-if="bangumiWeek.today.episodes.length == 0">
        <b-col class="text-center ml-3">
          <span style="font-size:14px">今天没有番剧更新哦</span>
        </b-col>
      </b-row>
      <b-row class="mt-2 pl-3 pr-4" v-for="f in bangumiWeek.today.episodes" :key="f+createId()">
        <!-- 封面图 -->
        <b-col @click="toDetatil(f.season_id)">
          <b-img-lazy class="rounded border hold" height="170" width="110"
            blank-src="https://s1.imagehub.cc/images/2023/03/27/c6c15085392b10160e0141e725c0ce91.webp" :src="'https://images.weserv.nl/?url='+f.cover" />
        </b-col>
        <!-- 番名 -->
        <b-col>
          <b-row>
            <span class="hold" @click="toDetatil(f.season_id)" style="font-family:HYZhengYuan-85S;font-size:18px">{{f.title}}</span>
          </b-row>
          <b-row>
            <span class="text-muted" style="font-size:16px">{{f.pub_index}}</span>
          </b-row>
          <b-row class="mt-2">
            <span style="font-size:16px">每周 {{f.pub_time}} 更新</span>
          </b-row>
        </b-col>
      </b-row>
    </b-row>

  </b-col>
</template>
<script>
import { nanoid } from 'nanoid';
export default {
  props: {

  },
  data() {
    return {
      //控制日期光标位置
      display: 1,
      //一周番剧更新总数据
      bangumiWeek: {
        today: {
          episodes: [],
        }
      },
      state: {
        show: true,
        text: "服务器未响应,请稍后重试"
      },
    }
  },
  created() {
    this.$httpBangumi.getDailyBangumi().then((res) => {
      if (res == "timeOut") {
        this.state.show = false;
        return
      }
      console.log(res);
      this.bangumiWeek = res;
      this.state.show = false;
    })
  },
  methods: {
    createId() {
      return nanoid(4);
    },
    //去详情页
    toDetatil(id) {
      this.$pageRedirect.toAnimationDetails(id, "ssid");
    },
    //打开完整页面
    showAll() {
      this.$pageRedirect.toWeeklyBangumiDetail(this.bangumiWeek.data, this.bangumiWeek.display);
    }
  },
}
</script>
<style scoped>
.daily {
  max-height: 550px;
  overflow: hidden;
}
.daily:hover {
  overflow-y: overlay;
}
::-webkit-scrollbar {
  width: 4px;
}
::-webkit-scrollbar-thumb {
  border-radius: 10px;
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  background: rgba(0, 0, 0, 0.2);
}
::-webkit-scrollbar-track {
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  border-radius: 0;
  background: rgba(0, 0, 0, 0.1);
}
.hold:hover {
  cursor: pointer;
}
</style>
